<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="我的代理" left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <div class="tab_nav" @click="onClickRight"><van-icon name="plus" color="#1D69E4" />股东管理</div>
      </template>
    </van-nav-bar>
    <div class="level">
      <!-- <div class="profit_core_title"> -->
      <div class="level_title">当前级别</div>
      <div class="level_city" :style="{ 'color': agentItem.text_color }">
        <div v-if="level != 0">
          {{ agentItem.parent_region_name + agentItem.region_name }}
        </div>
        <div v-else>
          {{ agentItem.agent_name }}
        </div>
      </div>
      <!-- </div> -->
      <img :src="agentItem.background" />
    </div>
    <!-- <div class="level_data" v-if="agentItem.items&&agentItem.items.length>0">
      <div class="level_data_img">
        <img src="../../../images/mine/icon_shuju.png" />
        我的数据
      </div>
      <div class="level_data_text">
        <div v-for="item,index in agentItem.items" :key="index">{{item.left_text}}{{item.right_text}}</div>
      </div>
    </div> -->
    <!-- <div class="level_btn" @click="handleLevelCredit">代理签约</div> -->
    <div class="level_data" v-for="item, index in agentItem.data_list"
      v-if="agentItem.data_list && agentItem.data_list.length > 0">
      <div class="level_data_img">
        <img src="../../../images/mine/icon_shuju.png" />
        {{ item.title }}
      </div>
      <div class="level_data_text">
        <div class="tips" v-if="item.desc">{{ item.desc }}</div>
        <div v-for="items, index in item.items" :key="index">
          {{ items.left_text }}{{ items.right_text }}
        </div>
        <div class="tip_bom">
          区域总收益：{{ agentItem.total_income }} <div @click="handleIncome">查看详情<img src="../../../images/icon_more1.png"
              alt=""></div>
        </div>
      </div>
    </div>
    <div>
      <div class="key-search">
        <van-field v-model="keyword" :placeholder="current == 0 ? '请输入商家名称进行搜索' : '请输入用户手机号/ID查询'" clearable />
        <div class="key-img" @click="getSerchdata">
          <img src="../../../images/search-icon.png" alt="">
        </div>
      </div>
      <div class="subsidy_title">
        <div class="subsidy_title_list" v-for="item, index in agentItem.tab_headers"
          :class="{ 'active': current === index }" @click="setCurrent(index)">{{ item.name }}({{ item.count }})</div>
        <!-- <div class="subsidy_title_list" :class="{ 'active': current === 0 }" @click="setCurrent(0)">区域商家列表</div>
        <div class="subsidy_title_list" :class="{ 'active': current === 1 }" @click="setCurrent(1)">区域下属代理</div> -->
        <!-- <div class="subsidy_title_list" :class="{ 'active': current === 1 }" @click="setCurrent(1)">区域下属代理</div> -->
      </div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
        <div class="order_all" v-for="item, index in subsidyList" :key="index" :title="item" v-if="current != 1">
          <div class="order_name_return">
            <div class="order_name_left">{{ item.name }}</div>
            <div class="balance_amt">{{ item.region_name }}</div>
          </div>
          <div class="ectension_list">
            <div class="ectension_list_item">
              <div>{{ item.today_order }}</div>
              <div class="ectension_list_item_title">今日订单数</div>
            </div>
            <div class="ectension_list_item">
              <div>{{ item.today_amount }}</div>
              <div class="ectension_list_item_title">今日营业额</div>
            </div>
            <div class="ectension_list_item">
              <div>{{ item.today_income }}</div>
              <div class="ectension_list_item_title">今日收益</div>
            </div>
            <div class="ectension_list_item">
              <div>{{ item.history_income }}</div>
              <div class="ectension_list_item_title">总计收益</div>
            </div>
          </div>
        </div>
        <div class="order_all" v-for="item, index in subsidyList" :key="index" :title="item" v-if="current === 1">
          <div class="order_name_top">
            <img v-if="item.owner?.avatar_url" :src="item.owner?.avatar_url" alt="">
            <img v-else src="../../../images/mine/head.png" alt="">
            <div class="info_order" @click="handleDetail(item)">详情 <img src="../../../images/icon_more3.png" alt=""></div>
            <div>
              <div class="order_name_top_left">{{ item.owner?.name }}</div>
              <div class="balance_top_amt">{{ item.region_name }}</div>
            </div>
          </div>
          <div class="ectension_list">
            <div class="ectension_list_item">
              <div>{{ item.store_count || 0 }}</div>
              <div class="ectension_list_item_title">区域站长数</div>
            </div>
            <div class="ectension_list_item">
              <div>{{ item.today_turnover || 0 }}</div>
              <div class="ectension_list_item_title">今日营业额</div>
            </div>
            <div class="ectension_list_item">
              <div>{{ item.month_turnover || 0 }}</div>
              <div class="ectension_list_item_title">本月营业额</div>
            </div>
            <div class="ectension_list_item">
              <div>{{ item.total_turnover || 0 }}</div>
              <div class="ectension_list_item_title">总营业额</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- <div class="level_data" style="margin-top: 0.2rem;padding-bottom: 0;" v-if="level!=0">
      <div class="level_data_img">
        <img src="../../../images/mine/icon_shuju.png" />
        合伙人管理
      </div>
      <van-field
        v-model="agentItem.partner_quota"
        name="partner_quota"
        label="剩余名额"
        placeholder="请输入剩余名额"
        input-align="right"
        readonly
      />
      <van-field
        v-model="account"
        name="account"
        label="赠送合伙人"
        placeholder="请输入对方手机号"
        input-align="right"
      />
    </div> -->
    <!-- <van-button
    v-if="level!=0"
      round
      block
      type="info"
      :disabled="account==''"
      @click="showPopup = true"
      style="width: 95%;margin: 0.32rem auto;"
      color="linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%)"
      >确认赠送</van-button
    > -->
    <van-popup v-model="showPopup" round closeable @click-close-icon="closeClick" position="bottom"
      class="balance-pay-popup-wrap" :style="{ height: showKeyboard ? '450px' : '250px' }">
      <div class="title">确认支付</div>
      <!-- 交易密码 -->
      <div class="row border-none">
        <span class="desc">请输入支付密码:</span>
      </div>
      <div class="row border-none">
        <van-password-input :value="tradePassword" :focused="showKeyboard"
          @focus="handleShowKeyboard"></van-password-input>
        <van-number-keyboard v-model="tradePassword" :show="showKeyboard" :maxlength="maxlength"
          :hide-on-click-outside="false" @input="onPasswordInput" @delete="onPasswordDelete"
          @blur="showKeyboard = false"></van-number-keyboard>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { AGENT_GIVE_AWAY_PARTNER, AGENT_INFO, BIG_AGENT_INFO, SUBSIDY_LIST, DATA_AUTH_STORE_LIST, DATA_AUTH_AGENT_LIST, DATA_AUTH_RELATION_STORE_LIST } from '@/api/mine'
export default {
  data() {
    return {
      num: 2,
      account: "",
      level: this.$route.query.level == 0 ? 100 : this.$route.query.level == 1 ? 101 : this.$route.query.level == 2 ? 102 : 103,
      showPopup: false,
      maxlength: 6,
      showKeyboard: false,
      tradePassword: "",
      completePassword: false,
      agentItem: {},
      partner_quota: "",
      current: 0,
      finished: false,
      loading: false,
      subsidyList: [],
      keyword: '',
      page: 1,
      pageSize: 100,
      total_income: 0
    };
  },
  mounted() {
    window.scrollTo(0, 0)
    if (this.$route.query.level == 0) {
      this.getBigAgentInfo()
    } else {
      this.getAgentInfo()
    }
  },
  methods: {
    getAgentInfo() {
      this.$http.get(AGENT_INFO + this.$route.query.level).then(res => {
        this.agentItem = res.data
        this.onLoad()
      })
    },
    getBigAgentInfo() {
      this.$http.get(BIG_AGENT_INFO, { params: { id: this.$route.query.level } }).then(res => {
        this.agentItem = res.data
        // this.total_income = res.data.total_income
        this.onLoad()
      })
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      this.$router.push({ name: 'dataAuth', query: { level: this.$route.query.level } })
    },
    // 点击切换tab
    setCurrent(index) {
      this.current = index;
      // 数据请求
      this.resetInit();
    },
    resetInit() {
      this.page = 1;
      this.subsidyList = [];
      this.finished = false;
      this.loading = true;
      this.onLoad()
    },
    getSerchdata() {
      this.resetInit();
    },
    onLoad() {
      let params = {};
      params['page_num'] = this.page;
      params['page_size'] = this.pageSize;
      params['keyword'] = this.keyword;
      params['level'] = this.level;
      params['code'] = this.agentItem.code
      let api = this.current == 0 ? DATA_AUTH_STORE_LIST : this.current == 1 ? DATA_AUTH_AGENT_LIST : DATA_AUTH_RELATION_STORE_LIST
      this.$http.get(api, { params: params })
        .then(res => {
          const {
            list
          } = res.data;

          if (list && list.length) {
            this.page++;
            this.subsidyList = this.subsidyList.concat(list);
            // 加载状态结束
            this.loading = false;
            if (list.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            this.finished = true;
          }
        })
    },
    //区域收益
    handleIncome() {
      this.$router.push({ name: 'revenue', query: { id: this.agentItem.code, msg: this.level } })
    },
    //代理签约
    handleLevelCredit() {
      this.$router.push({ name: 'level_credit', query: { id: this.agentItem.code, msg: this.level } })
    },
    //详情
    handleDetail(item){
      this.$router.push({ name: 'agent_detail', query: {code:item.region_code } })
    },
    // 确认赠送
    handleShowKeyboard() {
      this.tradePassword = "";
      this.completePassword = false;
      this.showKeyboard = true;
    },
    onPasswordInput(t) {
      (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
        this.tradePassword.length !== this.maxlength ||
        this.completePassword ||
        ((this.completePassword = !0), this.onSubmit());
    },
    onPasswordDelete() {
      this.tradePassword &&
        ((this.tradePassword = this.tradePassword.slice(
          0,
          this.tradePassword.length - 1
        )),
          (this.completePassword = this.tradePassword.length === this.maxlength));
    },
    closeClick() {
      this.showPopup = false;
      this.tradePassword = "";
      this.completePassword = "";
    },
    onSubmit() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let params = {
        level: this.level,
        account: this.account,
        pay_password: this.tradePassword,
      };
      this.$http.post(AGENT_GIVE_AWAY_PARTNER, params)
        .then(() => {
          this.loading = false;
          this.showPopup = false;
          this.$toast.success('赠送成功');
          this.account = ''
          this.pay_password = ''
          this.tradePassword = "";
          this.completePassword = "";
          this.getAgentInfo()
        })
        .catch(() => {
          this.loading = false;
        })
    },
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  //   min-height: 100vh;
  min-height: calc(100vh - 46px);

  padding-top: 46px;
  background: #f2f4f5;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}

.tab_nav {
  border-radius: .08rem;
  padding: .08rem .16rem;
  color: #1D69E4;
  border: 1px solid #1D69E4;
}

.level {
  position: relative;
  width: 95%;
  margin: 0 auto;
  margin-bottom: 0.2rem;

  .level_title {
    width: 1.3rem;
    height: 0.32rem;
    font-size: 0.24rem;
    line-height: 0.52rem;
    text-align: center;
    background: #ffffff;
    border-radius: 0px 100px 100px 0px;
    color: #333;
    // padding-left: 0.2rem;
    position: absolute;
    top: 20%;
  }

  .level_city {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
    font-size: 0.26rem;
    font-weight: bold;
    line-height: 0.52rem;
    padding-left: 0.2rem;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
  }

  img {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
}

.order_all {
  width: 95%;
  margin: 0 auto;
  margin-top: 0.2rem;
  // border: 0.01rem solid #999;
  border-radius: 0.16rem;
  background: #fff;

  .order_name_top {
    width: 90%;
    margin: 0 auto;
    padding-top: 0.32rem;
    display: flex;
    align-items: center;
    position: relative;

    .info_order {
      position: absolute;
      right: 0rem;
      top: 0.32rem;
      font-size: .24rem;
      color: #666666;
      display: flex;
      align-items: center;
      img{
        width: .32rem;
        height: .32rem;
        margin-right: 0;
      }
    }

    img {
      width: 1rem;
      height: 1rem;
      margin-right: .2rem;
    }

    .order_name_top_left {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
    }

    .balance_top_amt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: .2rem;
      // text-align: right;
      font-size: 0.24rem;
      font-family: PingFangSC, PingFang SC;
      color: #666;
    }
  }

  .order_name_return {
    display: flex;
    justify-content: space-between;
    font-size: 0.28rem;
    padding: 0.32rem;
    padding-bottom: 0;
    // border-bottom: 0.01rem solid #999;
    box-sizing: border-box;

    .order_name_left {
      width: 48%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
    }

    .balance_amt {
      // margin-top: 0.3rem;
      // font-weight: bold;
      width: 48%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      font-size: 0.24rem;
      font-family: PingFangSC, PingFang SC;
      color: #666;
    }

    // &_right {
    //     font-size: 0.25rem;
    // }
  }

  .ectension_list {
    padding: 0.32rem;
    // padding-top: 0.2rem;
    display: flex;
    justify-content: space-between;

    .ectension_list_item {
      width: 25%;
      text-align: center;
      font-size: 0.28rem;
      line-height: 0.6rem;

      .ectension_list_item_title {
        font-size: .24rem;
        color: #666;
      }
    }
  }
}

.level_btn {
  width: 55%;
  height: .88rem;
  margin: .32rem auto;
  background: linear-gradient(90deg, #4A89EC 0%, #1261E2 100%);
  border-radius: .44rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: .32rem;
  color: #FFFFFF;
  line-height: .88rem;
  text-align: center;
  font-style: normal;
}

.level_data {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 0.2rem;
  border-radius: 8px;

  // margin-top: 0.2rem;
  .level_data_img {
    background: #f4f7fd;
    border-radius: 8px 8px 0px 0px;
    // opacity: 0.06;
    padding: 0.2rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 0.28rem;
    // line-height: 0.4rem;
    // text-align: left;
    color: #333333;
    font-style: normal;

    img {
      width: 0.32rem;
      vertical-align: middle;
    }
  }

  .level_data_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    padding-left: 0.2rem;
    margin-top: 0.2rem;
  }
}

.tip_bom {
  width: 98%;
  border-top: 1px solid #E3E3E3;
  display: flex;
  justify-content: space-between;
  margin-top: .12rem;
  padding-top: .1rem;
  // padding-right: .12rem;
  color: #333333;
  box-sizing: border-box;

  div {
    display: flex;
    align-items: center;
    color: #1D69E4;

    img {
      width: .32rem;
      height: .32rem;
    }
  }
}

.level_title {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;

  .level_title_btn {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.32rem;
      color: #333333;
      line-height: 0.44rem;
      text-align: left;
      font-style: normal;
    }

    .btn {
      padding: 0.1rem 0.3rem;
      background: linear-gradient(270deg, #1261E2 0%, #4A89EC 100%);
      border-radius: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 0.24rem;
      color: #ffffff;
      line-height: 0.34rem;
      //   text-align: left;
      font-style: normal;
    }
  }

  .level_title_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    margin-left: 0.2rem;
  }
}

.balance-pay-popup-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  text-align: center;
  padding: 0.32rem;
  box-sizing: border-box;

  .title {
    color: #1b1b1b;
    font-size: 0.36rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }

  .row {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ebedf0;

    &.border-none {
      border: none;
    }
  }

  .van-password-input {
    width: 100%;
    margin: 0;
  }
}

.key-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 0 auto;
  margin-top: .2rem;

  ::v-deep .van-cell {
    border-radius: .12rem;
    width: 83%;
  }

  .key-img {
    background: #1D69E4;
    border-radius: 6px;
    width: 15%;
    padding: .24rem 0;
    display: flex;

    img {
      display: block;
      margin: 0 auto;
      // line-height: .72rem;
      width: .3rem;
      height: .3rem;
    }
  }
}

.subsidy_title {
  // width: 95%;
  margin: 0 auto;
  margin-top: 0.2rem;
  display: flex;
  justify-content: flex-start;
  font-size: 0.28rem;
  padding: .24rem .24rem 0 .24rem;
  box-sizing: border-box;
  text-align: center;
  // background-color: #fff;

  .subsidy_title_list {
    flex: 1;
    // margin-right: 0.4rem;
    // font-size: 0.28rem;
    position: relative;
    color: #666666;
    padding-bottom: 0.24rem;
    text-align: center;
  }

  .subsidy_title_list.active {
    color: #1D69E4;
    font-weight: 500;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30%;
      height: 2px; // 横杠的高度，可以根据需要调整
      background-color: #1D69E4; // 红色横杠
    }

    /* 选中时黑色 */
  }


}
</style>
